<template>
  <view class="container">
    <!-- 渐变背景区域 -->
    <view class="header-wrapper">
      <view class="gradient-bg"></view>
      <!-- 积分展示区域 -->
      <view class="header">
        <view class="points">
          <image class="gold-icon" :src="images.icons.goldIcon" mode="aspectFit" />
          <text class="points-num">45646</text>
        </view>
        <view class="check-rights"> 查看会员权益 </view>
      </view>

      <!-- 打卡日历区域 -->
      <view class="calendar-wrapper">
        <view class="calendar-box">
          <view class="tip-content"> 您已签到298天了，继续加油吧！ </view>
          <image class="calendar-icon" :src="images.icons.calendarBg" mode="aspectFit" />
          <view class="calendar-grid">
            <view v-for="(item, index) in calendarData" :key="index" class="calendar-item"
              :class="{ completed: item.completed }">
              <view class="check-status">
                <block v-if="item.completed">
                  <image class="check-icon" :src="images.icons.hook" mode="aspectFit" />
                  <view class="status-text">已完成</view>
                </block>
                <block v-else>
                  <image class="gold-icon-small" :src="images.icons.goldIcon" mode="aspectFit" />
                  <view class="reward-text">金币+5</view>
                </block>
              </view>
              <view class="date">{{ item.date }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 任务列表区域 -->
      <view class="task-list">
        <view v-for="task in taskList" :key="task.id" class="task-item">
          <view class="task-left">
            <image class="task-icon" :src="images.icons.magicWand" mode="aspectFit" />
            <view class="task-info">
              <text class="task-name">{{ task.taskName }}</text>
              <view class="reward">
                <image class="coin-icon" :src="images.icons.goldIcon" mode="aspectFit" />
                <text class="reward-text">金币+5</text>
              </view>
            </view>
          </view>
          <view class="task-right">
            <button class="complete-btn" @tap.stop="completeTask(task)">
              {{ task.status === '2' ? '已打卡' : '未打卡' }}
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { images } from '@/config/images';
import { useUserStore } from '@/stores/user';
import { getUserTaskList, getTaskDetail, type TaskItem } from '@/api/task';

const userStore = useUserStore();
const taskList = ref<TaskItem[]>([]);

// 日历数据
const calendarData = ref<Array<{ date: string; completed: boolean }>>([]);

// 初始化日历数据
const initCalendarData = () => {
  const dates = [];
  const today = new Date();

  // 获取前两天的日期
  for (let i = 2; i > 0; i--) {
    const date = new Date(today);
    date.setDate(today.getDate() - i);
    dates.push({
      date: `${date.getMonth() + 1}.${date.getDate()}`,
      completed: true,
    });
  }

  // 添加今天
  dates.push({
    date: '今天',
    completed: true,
  });

  // 获取后7天的日期
  for (let i = 1; i <= 7; i++) {
    const date = new Date(today);
    date.setDate(today.getDate() + i);
    dates.push({
      date: `${date.getMonth() + 1}.${date.getDate()}`,
      completed: false,
    });
  }

  calendarData.value = dates;
};

// 获取任务列表
const getTaskList = async () => {
  try {
    const res = await getUserTaskList({
      userId: userStore.userId,
    });
    console.log('任务列表响应：', res);
    if (res?.code === 200 && res.rows) {
      taskList.value = res.rows;
    }
  } catch (error) {
    console.error('获取任务列表失败：', error);
    uni.showToast({
      title: '获取任务列表失败',
      icon: 'none',
    });
  }
};

// 去打卡详情页面
const completeTask = async (task: TaskItem) => {
  if (task.status === '2') return
  // 可以根据实际需求跳转到对应页面
  uni.navigateTo({
    url: `/pages/task/detail?taskId=${task.taskId}&buyType=${task.buyType}`,
  });
};

// 监听页面显示
onShow(() => {
  getTaskList();
  initCalendarData();
});
</script>

<style lang="scss" scoped>
.container {
  background: #f5f6fa;
  min-height: 100vh;
}

.header-wrapper {
  width: 100%;
  position: relative;
}

.gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 372rpx;
  background: linear-gradient(180deg, #393f9d, rgba(57, 63, 157, 0));
  z-index: 0;
}

.header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 25rpx;
  box-sizing: border-box;

  .points {
    display: flex;
    align-items: center;
    gap: 8rpx;

    .gold-icon {
      width: 36rpx;
      height: 36rpx;
    }

    &-num {
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
    }
  }

  .check-rights {
    font-weight: bold;
    font-size: 28rpx;
    color: #393f9d;
    width: 193rpx;
    height: 50rpx;
    background: linear-gradient(189deg, #ffffff, #d0d3ff);
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.calendar-wrapper {
  margin: 20rpx auto 0;
  width: 706rpx;
  background: #ffffff;
  border-radius: 17rpx;
  border: 8rpx solid #9097ff;
  position: relative;
}

.calendar-box {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 10rpx 50rpx 10rpx;
  background: #ffffff;
  position: relative;

  .tip-content {
    flex: 1;
    white-space: nowrap;
    font-size: 32rpx;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    color: #7075d5;
    margin-bottom: 28rpx;
  }

  .calendar-icon {
    position: absolute;
    top: -12rpx;
    right: -18rpx;
    width: 126rpx;
    height: 88rpx;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 50rpx 20rpx;
    padding: 0 10rpx;
    box-sizing: border-box;

    .calendar-item {
      position: relative;
      background: #ffefd7;
      border: 2px solid #ffb167;
      border-radius: 20rpx;
      opacity: 0.85;
      width: 114rpx;
      height: 114rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 0;

      &.completed {
        background: #ffefd7;
        border: 2px solid #ffb167;
        border-radius: 20rpx;
        opacity: 1;

        .check-status {
          .check-icon {
            width: 45rpx;
            height: 45rpx;
            margin-right: 4rpx;
            font-size: 24rpx;
            color: #ef873a;
          }

          .status-text {
            color: #ff9f40;
            font-size: 24rpx;
            color: #ef873a;
          }
        }
      }

      .check-status {
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8rpx;

        .check-icon {
          width: 32rpx;
          height: 32rpx;
        }

        .status-text {
          color: #ff9f40;
          font-size: 26rpx;
          font-weight: 500;
        }

        .gold-icon-small {
          width: 52rpx;
          height: 52rpx;
        }

        .reward-text {
          color: #ff9f40;
          font-size: 26rpx;
          font-weight: 500;
        }
      }

      .date {
        position: absolute;
        left: 50%;
        bottom: -40rpx;
        transform: translateX(-50%);
        font-size: 24rpx;
        color: #666;
        white-space: nowrap;
      }
    }
  }
}

.task-list {
  margin: 30rpx 22rpx;
  display: flex;
  flex-direction: column;
  gap: 15rpx;

  .task-item {
    width: 706rpx;
    height: 118rpx;
    background: #ffffff;
    border-radius: 17rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    box-sizing: border-box;

    .task-left {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .task-icon {
        width: 82rpx;
        height: 82rpx;
        background: #f0f2ff;
        border-radius: 16rpx;
        padding: 10rpx;
      }

      .task-info {
        display: flex;
        flex-direction: column;
        gap: 8rpx;
        margin-left: 20rpx;

        .task-name {
          font-size: 28rpx;
          color: #333;
          line-height: 1;
        }

        .reward {
          display: flex;
          align-items: center;
          gap: 4rpx;
          margin-top: 10rpx;

          .coin-icon {
            width: 32rpx;
            height: 32rpx;
          }

          .reward-text {
            font-size: 24rpx;
            color: #ff9f40;
            line-height: 1;
          }
        }
      }
    }

    .task-right {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .reward {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4rpx;

        .coin-icon {
          width: 32rpx;
          height: 32rpx;
        }

        .reward-text {
          font-size: 24rpx;
          color: #ff9f40;
          line-height: 1;
        }
      }

      .complete-btn {
        line-height: 43rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        width: 125rpx;
        height: 43rpx;
        background: linear-gradient(138deg, #3b56ed, #7394f2);
        box-shadow: 0rpx 6rpx 50rpx 1rpx rgba(67, 87, 234, 0.44);
        border-radius: 22rpx;
        font-size: 26rpx;
        color: #ffffff;
        padding: 0;

        &.completed {
          background: #e8e9f1;
          color: #999;
        }
      }
    }
  }
}
</style>
